
body{
	width:380px;
	padding:0;
	margin:0;
}
*{outline:none;}
input:not([type]), 
input[type="email"],
input[type="number"], 
input[type="password"], 
input[type="tel"], 
input[type="url"], 
input[type="text"],
input[type="date"],
input[type="datetime"],
select,
textarea{
	padding:8px 10px;
	box-sizing:border-box;
	border-radius:1px;
	border:1px solid #dbdbdb;
}
button{
	cursor:pointer;
}
body,input,button,textarea{
	font-family:-apple-system, "Helvetica Neue", Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	color:#404040;
}

header, footer{
	padding:0 5px;
	background:#F5F5F5;
	box-shadow:0 0 5px rgba(0,0,0,0.08);
	position:relative;
	z-index:100;
}

.login_mask{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	font-size:0;
	z-index:2000;
	text-align:center;
	background:rgba(100,100,100,0.9);
	&:before{
		content:"";
		display:inline-block;
		height:100%;
		vertical-align: middle;
	}
	a{
		display:inline-block;
		vertical-align: middle;
		font-size:16px;
		color:#fff;
	}
}

.logo {
	border-bottom:2px solid #2096F1;
	padding:7px 8px;
	
	*{
		display:inline-block;
		vertical-align: middle;
		font-size:0;
		line-height:1em;
	}
	img{
		margin-right:5px;
	}
	.title{
		font-size:18px;
		color:#2096F1;
	}
	.sub_title{
		font-size:16px;
		padding-left:5px;
	}
}

.order_tip{
	padding:8px;
	color:#A7A7A7;
	font-size:14px;
	
	.order_count{
		color:red;
	}
}


.orders{
	max-height:360px;
	background:#F0F0F0;
	padding:12px 8px;
	color:#999;
	min-height:100px;
	overflow-y:auto;
	
	.order{
		padding:5px;
		background:#fff;
		font-size:0;
		transition: box-shadow 200ms;
		
		&:not(:last-child){
			margin-bottom:10px;
		}
		&:hover{
			box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
		}
	}
	
	.order_header{
		-webkit-user-select: none;
		user-select: none;
		cursor:pointer;
	}
	
	.order_left,.order_right{
		font-size:15px!important;
		display:inline-block;
		width:50%;
		
		> * {
			padding:4px;
		}
	}
	
	.order_left{
		.price span{
			color:#FF5A00;
		}
	}
	
	.order_right{
		text-align: right;
		
		.box_name{
			padding:3px 8px;
			border:1px solid #ccc;
			border-radius:20px;
			display:inline-block;
		}
		
		button{
			border:none;
			background:none;
			color:#ccc;
		}
	}
	
	.order_detail{
		background:#FAFAFA;
		font-size:14px;
		padding:5px;
	}
	
	.order_info{
		position:relative;
		padding:5px 0;
		border-bottom:1px solid #ccc;
		
		button{
			border:1px solid #2498F2;
			padding:4px 6px;
			background:#fff;
			position:absolute;
			color:#2498F2;
			top:0;
			bottom:0;
			right:5px;
			height:2.2em;
			margin:auto;
			border-radius:3px;
		}
		
		.address{
			width:260px;
			margin-top:3px;
		}
	}
	
	.products{
		padding:3px 0;
		font-size:14px;
		
		.product{
			padding:2px 0;
		}
		.name{
			color:#aaa;
		}
		.price{
			float:right;
			margin-top:2px;
			color:#FF5A00;
			&:before{
				content:"¥ ";
			}
		}
		
		.count{
			padding-left:5px;
			color:#FF5A00;
			&:before{
				content:"x ";
				font-size:15px;
			}
		}
	}
}

footer{
	font-size:0;
	padding:10px 0;
	
	button{
		width:50%;
		display:inline-block;
		box-sizing:border-box;
		background:none;
		border:none;
		font-size:16px;
		padding:4px;
		color:#666666;
		
		&:first-child{
			border-right:1px solid #ccc;
		}
	}
}


::-webkit-scrollbar {
	width: 15px;
	-webkit-appearance: none;
}
::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}
::-webkit-scrollbar-thumb {
	height: 6px;
	border: 4px solid transparent;
	-webkit-border-radius: 7px;
	background-color: rgba(0,0,0,.15);
	background-clip: padding-box;
	-webkit-box-shadow: inset -1px -1px 0 rgba(0,0,0,.05), inset 1px 1px 0 rgba(0,0,0,.05);
}